<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 第一个表格 */
    
.chengjibiaoge,td,th{
     text-align: center; border: 1px solid;border-collapse: collapse; margin: auto;text-align: center;width: 300px;
    }

    /* 第二个表格 */
    
    .qita,td{
       margin: auto;height: 40px; width: 700px; border: 1px solid; border-collapse: collapse;text-align: center;
    }
    /* 第三个表格 */
    .disan,td,th{
        width: 800px;height: 40px; text-align: center; margin: auto; border: 1px solid; border-collapse: collapse; text-align: center;
    }
    
    /* 第三表格字体 */
    .da{
        font-weight: bolder
    }
    /* 背景属性 */
    #beijing{
       background-image: url(姓名和学号.png) ;  width: 100%; height: 100%; background-repeat: no-repeat; text-align: center; background-size: cover;
    }
   
</style>
<body id="beijing">
    <!-- 第一个表格 -->
    <div class="diyi">
        <table class="chengjibiaoge">
            <caption>成绩表</caption>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>总分</th>
            </tr>
            <tr>
                <td>李小路</td>
                <td>60</td>
                <td>58</td>
                <td>118</td>
            </tr>
            <tr>
                <td>安可可</td>
                <td>80</td>
                <td>20</td>
                <td>100</td>
            </tr>
        </table>
    </div>
    <!-- 第二个表格 -->
    <div class="dier">
        <table class="qita">
            <tr>
                <td rowspan="2">nihao</td>
                
                <td colspan="2">nihaop</td>
                
                <td colspan="2" rowspan="3">nihao</td>
                
            </tr>
            <tr>
                
            <td>nihao</td>
                <td>nihao</td>
            </tr>
            <tr>
                <td  rowspan="2">nihao</td>
                <td>nihao</td>
                <td>nihao</td>
            </tr>
            <tr>
               
                <td>nihao</td>
                <td>nihao</td>
                <td>nihao</td>
                <td>nihao</td>
            </tr>
            <tr>
                <td>nihao</td>
                <td>nihao</td>
                <td>nihao</td>
                <td>nihao</td>
                <td>nihao</td>
            </tr>
            <tr>
                <td>nihao</td>
                <td>nihao</td>
                <td>nihao</td>
                <td>nihao</td>
                <td>nihao</td>
            </tr>
            <tr>
                <td colspan="3">nihao</td>
                <td>nihao</td>
                <td>nihao</td>
            </tr>
            <tr>
                <td colspan="5">nihao</td>
            </tr>
        </table>
    </div>
    <!-- 第三个表格 -->
    <div class="zuihou">
        <table class="disan">
            <caption class="da">复杂的完整成绩表</caption>
            <tr class="da">
                <td rowspan="2">姓名</td>
                <td colspan="2">通识课</td>
                
                <td colspan="3">专业课</td>
                

                <td rowspan="2">总分</td>
            </tr>
            <tr class="da">
                
                <td>英语</td>
                <td>高数</td>
                <td>UI设计</td>
                <td>网页设计</td>
                <td>程序设计</td>
                
            </tr>
            <tr>
                <td class="da">张三</td>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
            <tr>
                <td class="da">张三</td>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
            <tr>
                <td class="da">张三</td>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
            <tr>
                <td class="da">张三</td>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
            <tr>
                <td class="da">平均</td>
                <td>60</td>
                <td>70</td>
                <td>80</td>
                <td>90</td>
                <td>80</td>
                <td>380</td>
            </tr>
        </table>



    </div>
</body>
</html>